<template>
    <div id="app" :lang="$i18n.locale">
        <router-view />
    </div>
</template>

<script>
export default {
  name: 'App',
  watch: {
    '$i18n.locale'(newVal, oldVal) {
      // 更新HTML元素的lang属性
      document.documentElement.setAttribute('lang', newVal);
    }
  },
  mounted() {
    // 初始化时设置HTML元素的lang属性
    document.documentElement.setAttribute('lang', this.$i18n.locale);
  }
}
</script>

<style>
#app {
    min-height: 100vh;
}

/* 添加视口设置，确保在移动设备上正确缩放 */
@media screen and (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

/* 修复iOS上的一些样式问题 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea {
    -webkit-appearance: none;
    border-radius: 0;
}

/* 防止长按弹出菜单 */
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 在表单元素上允许选择 */
input, textarea {
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}
</style>
